<template>
  <view class="container">
    <map
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :scale="scale"
      show-location
      @tap="handleOpenLocation"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.908823, // 地图中心纬度
      longitude: 116.39747, // 地图中心经度
      scale: 14, // 地图缩放级别，范围3-20
      markers: [
        {
          id: 1,
          latitude: 39.908823,
          longitude: 116.39747,
          title: '当前位置',
          iconPath: '/static/logo.png', // 标记点图标
          width: 32,
          height: 32
        },
        {
          id: 2,
          latitude: 39.918823,
          longitude: 116.40747,
          title: '北京天安门',
          iconPath: '/static/logo.png',
          width: 32,
          height: 32
        },
        {
          id: 3,
          latitude: 39.898823,
          longitude: 116.38747,
          title: '北京故宫',
          iconPath: '/static/logo.png',
          width: 32,
          height: 32
        },
        {
          id: 4,
          latitude: 39.928823,
          longitude: 116.41747,
          title: '北京王府井',
          iconPath: '/static/logo.png',
          width: 32,
          height: 32
        },
        {
          id: 5,
          latitude: 39.888823,
          longitude: 116.37747,
          title: '北京西单',
          iconPath: '/static/logo.png',
          width: 32,
          height: 32
        }
      ]
    }
  },
  onLoad() {
    // 获取当前位置
    this.getLocation()
  },
  methods: {
    // 获取当前位置
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          this.latitude = res.latitude
          this.longitude = res.longitude
          // 更新标记点位置
          this.markers[0].latitude = res.latitude
          this.markers[0].longitude = res.longitude
        },
        fail: err => {
          console.error('获取位置失败：', err)
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          })
        }
      })
    },
    // 点击地图
    handleMapTap(e) {
      console.log('点击地图坐标：', e.detail)
      uni.chooseLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        success: res => {
          console.log('选择位置成功：', res)
          // 更新地图中心点
          this.latitude = res.latitude
          this.longitude = res.longitude
          // 更新标记点
          this.markers[0] = {
            id: 1,
            latitude: res.latitude,
            longitude: res.longitude,
            title: res.name,
            iconPath: '/static/logo.png',
            width: 32,
            height: 32
          }
          // 显示选择的位置信息
          uni.showToast({
            title: `已选择：${res.name}`,
            icon: 'none',
            duration: 2000
          })
        },
        fail: err => {
          console.error('选择位置失败：', err)
          uni.showToast({
            title: '选择位置失败',
            icon: 'none'
          })
        }
      })
    },

    // 打开地图
    handleOpenLocation() {
      uni.openLocation({
        latitude: this.latitude,
        longitude: this.longitude,
        scale: 18, // 缩放比例，范围3-20
        name: '当前位置', // 位置名称
        address: '详细地址', // 详细地址
        success: () => {
          console.log('打开地图成功')
        },
        fail: err => {
          console.error('打开地图失败：', err)
          uni.showToast({
            title: '打开地图失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  position: relative;

  .map {
    width: 100%;
    height: 100%;
  }
}
</style>
